<template>
	<view class="orderItem" @click="goDetail">
		<view class="title-wrapper">
			<view class="title">
				{{ source.customerPetName }}
			</view>
			<view class="status">
				{{ statusList[source.status] }}
			</view>
		</view>
		<view class="info-wrapper">
			<image :src="source.productImage" mode="aspectFill" class="product-image"></image>
			<view class="info">
				<view class="title">
					{{ source.productName }}
				</view>
				<view class="number">
					<text>货号：{{ source.productCode }}</text>
				</view>
				<view class="spec-wrapper">
					<view class="price">
						<text class="unit">单价：</text>
						<text class="unit">￥</text>
						<text>{{ (source.price).toFixed(1) }}</text>
						<text class="unit">/件</text>
					</view>
				</view>
			</view>
		</view>
		<view class="refund-info-wrapper">
			<view class="item flex">
				申请原因：{{ source.reason }}
			</view>
			<view class="item flex">
				申请时间：{{ source.applyTime }}
			</view>
			<view class="item">
				缺损重量(净重)：{{ source.lossWeight }}斤
			</view>
			<view class="item">
				申请退款：{{ source.applyRefund }}元
			</view>
			<view class="item" v-if="source.status === 9">
				退款金额：{{ source.refundAmount || 0 }}元
			</view>

		</view>
		<view class="bottom-wrapper" v-if="source.status === 2">
			<view class="btn-wrapper">
				<view class="btn primary" @click.stop="audit">
					审核
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			source: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				statusList: ['', '平台审核中', '城市仓审核中', '供应商审核中', '客户确认中', '平台介入中', '退款中', '已拒绝', '已撤销', '已完成'],
			}
		},
		mounted() {

		},
		methods: {
			audit() {
				this.$emit('audit', this.source)
			},
			goDetail() {
				uni.navigateTo({
					url: '/subPage_afterSale/detail?id=' + this.source.id
				})
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.orderItem {
		.title-wrapper {
			display: flex;
			align-items: center;
			padding: 20upx 25upx;
			border-bottom: 1upx dashed #efefef;

			.title {
				font-size: 32upx;
				font-weight: bold;
				flex: 1;
			}

			.status {
				color: #f90;
				font-size: 32upx;
			}
		}

		.info-wrapper {
			display: flex;
			padding: 20rpx 30rpx;

			.product-image {
				width: 140upx;
				height: 140upx;
				min-width: 140rpx;
				margin-right: 20upx;
				border-radius: 10upx;
			}

			.info {
				flex: 1;

				.title {
					font-size: 32upx;
					font-weight: bold;
					line-height: 36upx;
					margin-bottom: 20upx;
					width: 500rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出内容隐藏
					text-overflow: ellipsis; //文本溢出部分用省略号表示
					display: -webkit-box; //特别显示模式
					-webkit-line-clamp: 2; //行数
					line-clamp: 2;
					-webkit-box-orient: vertical; //盒子中内容竖直排列
					color: #434343;
				}

				.number {
					font-size: 28upx;
					color: #555555;
					line-height: 28upx;
					margin-bottom: 10upx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.red {
						color: #FC003B;
					}

					// .line {
					// 	margin: 0 20rpx;
					// 	color: #cecece;
					// }
				}

				.spec-wrapper {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.price {
						font-size: 32upx;
						color: #444444;
						margin-right: 20upx;

						.unit {
							font-size: 28upx;
						}
					}

					.noprice {
						color: #FC003B;
						font-size: 32upx;
					}

					.spec {
						font-size: 28upx;
						color: #555;
					}
				}
			}

		}

		.refund-info-wrapper {
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			font-size: 28rpx;
			color: #555;
			border-top: 1upx dashed #efefef;

			.item {
				width: 50%;

				&.flex {
					width: 100%;
				}
			}
		}

		.bottom-wrapper {
			height: 60upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 15upx 0;

			.date {
				font-size: 28upx;
				line-height: 28upx;
				color: #999999;
				display: flex;
				align-items: center;

				.order-type {
					margin-right: 10upx;
				}
			}

			.btn-wrapper {
				flex: 1;
				display: flex;
				padding: 0 30upx;
				justify-content: flex-end;
				border-top: 1upx dashed #efefef;

				.btn {
					border-radius: 10upx;
					font-size: 28upx;
					margin-left: 20upx;
					margin-top: 10upx;
					padding: 8rpx 40upx;
					display: flex;
					align-items: center;
					border: 1upx solid #F26022;

					&.default {
						border-color: #B8B8B8;
						color: #5B5B5B;

						&:active {
							background-color: #E3E3E3;
							border-color: #E3E3E3;
						}
					}

					&.primary {
						background-color: #F26022;
						color: #ffffff;

						&:active {
							opacity: 0.7;
						}
					}

					&.plain {
						background-color: #ffffff;
						border: 2upx solid #F26022;
						color: #F26022;

						&:active {
							background-color: #F2602266;
						}
					}

					&.disabled {
						background-color: #cecece !important;
					}

				}
			}
		}
	}
</style>